// 注意：在webpack中，使用 import Vue from 'vue'导入的Vue构造函数，功能不完整，
// 只提供了runtime-only的方式，并没有提供像网页中那样的使用方式
// import Vue from 'vue'
import Vue from '../node_modules/vue/dist/vue.js'

// 回顾包的查找规则
// 1. 找项目根目录中有没有 Node_modules的文件夹
// 2. 在node_modules中根据包名，找对应的vue文件夹
// 3. 在vue文件夹中找一个package.json的包配置文件
// 4. 在package.json文件中，查找一个main属性[main属性指定了这个包被加载时候的入口文件]
// var login = {
//     template: '<h1>这是login组件，是十一网页中形式创建出来的</h1>'
// }

// 1.导入login组件
import login from './login.vue'
// 默认webpack无法打包.vue文件，需要安装相关的loader
// cnpm i vue-loader vue-template-compiler -D
// 在配置文件中，新增配置项{test:/.\vue$/,use:'vue-loader'}
var vm = new Vue({
    el: '#app',
    data: {
        msg: '123'
    },
    // components: {
    //     login
    // }
    // render: function(createElements) {
    //     return createElements(login)
    // }

    //简化上面render函数的步骤：
    //1. 去掉function 使用=>在参数括号和方法体花括号之间
    //2. 如果只有一个参数，小括号可以去掉
    //3. 将形参简写
    //4. 如果方法体只有一行代码，可以去掉花括号
    //5. 默认会自动return ，我们删除自己的return即可
    render: c => {
        return c(login)
    }
});

// <<<<<<<总结梳理：webpack中如何使用vue>>>>>>>>>
// 前情提示：安装了各种loader后，跑不起来的，删除node_modules再用cnpm i安装所有的package.json中依赖
// 1. 安装vue的包：cnpm i vue -S
// 2. 由于在webpack中，推荐使用.vue这个组件模板文件定义组件，所以，需要安装能解析这种文件的loader
// cnpm i vue-loader vue-template-compiler -D
// 在这个时候，因为vue-loader版本高于15版本，我们需要安装vue-loader-plugin -S，并且在config中配置
// const VueLoaderPlugin = require('vue-loader/lib/plugin')并且在plugins中创建对象
// 3. 在main.js中，导入vue模块， import Vue from 'vue'
// 4. 定义一个.vue结尾的组件，其中，组件有三部分组成：template script style
// 5. 使用import login from './login.vue'导入这个组件
// 6. 创建vm的实例var vm = new Vue({el: '#app',render: c=> c(login)})
// 7. 在页面中创建一个id为app的div元素，作为我们vm实例要控制的区域

import m1,{title,content} from './test.js'

console.log(m1)
console.log(title + '-----' + content)